<div class="right-container">
    <div class="nav"><span ng-class={'active':myType=='myLearn'} ng-click="changeTabs('myLearn')">我的学习</span><span ng-class={'active':myType=='myOrders'} ng-click="changeTabs('myOrders')">我的订单</span></div>
    <!--我的学习-->
    <section class="learn-container" ng-if="myType=='myLearn'">
        <table class="table">
            <thead>
            <tr>
                <th ng-repeat=" item in tableTitle" ng-class="$index==0?'td-40':'td-30'" ng-bind="item"></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in videos" >
                <td  class="td-50">
                    <div class="f-vedio-info clearfix">
                        <div class="f-myvedio-l">
                            <img src="them/imag/noCourse.png" ng-src="{{item.previewPath}}" alt=""/>
                        </div>
                        <div class="f-myvedio-r  text-overflow">
                            <p class="f-myvedio-r-up">
                                <a ng-bind="item.title | getRightHome2" ng-click="goVedio(item)"></a>
                                <a ><span>讲师：</span><span  ng-bind="item.teacher.name"></span></a>
                            </p>
                            <p class="f-myvedio-r-down" ng-bind="item.price |priceFormat" ></p>
                        </div>
                    </div>
                </td>
                <td class="td-15" ng-bind="item.teacher.name"></td>
                <td class="td-15" ng-bind="item.updateTime | dateFilter"></td>
                <td class="td-15" ><a class="back-btn"  ng-bind="i18n.personCenter.back" ng-click="back(item)"></a></td>
            </tr>
            </tbody>
        </table>
    </section>
    <!--我的订单-->
    <section class="order-container" ng-if="myType=='myOrders'" style="display: none">
        <ul class="order-nav">
            <li class="active"><span>全部课程</span></li>
            <li><span>待付款</span></li>
            <li><span>已付款</span></li>
        </ul>
        <div class="order-title">
            <span>全部订单</span>
            <span>价格</span>
            <span>订单状态</span>
            <span>操作</span>
        </div>
        <div class="order-content">
            <div class="order-item">
                <ul class="order-info">
                    <li>2017-04-10 12:09</li>
                    <li><span>订单编号：</span><span class="number">2827736282947</span></li>
                    <li><span class="icon"></span><span class="number">乂联工程咨询（上海）有限公司</span></li>
                </ul>
                <div class="order-detail">
                    <div class="detail-left">
                        <div class="detail-left-box">
                            <div class="left-box">
                                <img src="them/imag/video.jpg" alt=""/>
                                <div><a href="javascript:;">助力2017考研——学长学姐开讲啦</a><p>课程有效期：<span>永久有效</span></p></div>
                            </div>
                            <div class="right-box">￥60</div>
                        </div>
                        <div class="detail-left-box">
                            <div class="left-box">
                                <img src="them/imag/video.jpg" alt=""/>
                                <div><a href="javascript:;">助力2017考研——学长学姐开讲啦</a><p>课程有效期：<span>永久有效</span></p></div>
                            </div>
                            <div class="right-box">￥60</div>
                        </div>
                    </div>
                    <div class="detail-center">
                        <div><span>已付款</span><span>(共<i>￥240</i>)</span></div>
                    </div>
                    <div class="detail-right">
                        <div>
                            <a href="javascript:;">立即学习</a>
                            <a href="javascript:;">取消订单</a>
                        </div>
                        <div>
                            <a href="javascript:;">立即学习</a>
                            <a href="javascript:;">取消订单</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <no-content style="width:959px;margin: 0 auto;" conf-type="'person'" conf-content="noContent" ng-if="videos.length == 0"></no-content>
    <ui-pagination  ng-if="paginationConf" conf="paginationConf"></ui-pagination>
</div>
<!--取消和删除订单弹层-->
<div class="order-confirm" ng-if="cancleFlag">
    <p>您确定要删除该订单吗</p>
    <div><span>确定</span><span>取消</span></div>
    <span ng-click="closeConfirm('cancle')">×</span>
</div>
<div class="order-confirm" ng-if="delFlag">
    <p>您确定要取消该订单吗</p>
    <div><span>确定</span><span>取消</span></div>
    <span ng-click="closeConfirm('del')">×</span>
</div>
<style>
    .order-confirm{
        width:400px;
        height:166px;
        border:1px solid #30a3ff;
        box-shadow:0 0 10px #30a3ff;
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        background: white;
        text-align: center;
        font-size:16px;
    }
    .order-confirm>span{
        display: block;
        width:16px;
        height:16px;
        font-size:16px;
        font-weight: bold;
        color:#868686;
        text-align: center;
        line-height:16px;
        position: absolute;
        top:15px;
        right:15px;
        cursor: pointer;
    }
    .order-confirm p{
        margin-top:30px;
        margin-bottom:55px;
    }
    .order-confirm>div{
        color:white;
        font-size:0px;
    }
    .order-confirm>div span{
        display: inline-block;
        font-size:16px;
        width:70px;
        height:30px;
        border-radius:1px;
        line-height:30px;
    }
    .order-confirm>div span:nth-child(1){
        background: #30a3ff;
        margin-right:65px;
    }
    .order-confirm>div span:nth-child(2){
        background: #bbbbbb;
    }
    .learn-container{
        margin-top:20px;
    }
    *{
        box-sizing: border-box;
    }
    .right-container{
        width:960px;
        float:left;
        margin-left:30px;
    }
    .nav{
        width:100%;
        height:50px;
        line-height:50px;
        border-bottom: 1px solid #dddddd;
    }
    .nav span{
        display:inline-block;
        padding:0 10px;
        margin-left:10px;
        line-height:46px;
        font-size:14px;
        cursor: pointer;
    }
    .nav span.active{
        border-bottom: 2px solid #30a3ff;
        color:#30a3ff;
    }
    .order-nav>li{
        font-size:12px;
        display: inline-block;
        padding:20px 0;
        cursor: pointer;
    }
    .order-nav>li span{
        display:block;
        padding:0 20px;
        border-right:1px solid #dddddd;
    }
    .order-nav>li.active{
        color:#30a3ff;
    }
    .order-nav>li:last-child span{
        border:none;
    }
    .order-title{
        height:40px;
        border:1px solid #dddddd;
        background:#f5f5f5;
        color:#666666;
        font-size:14px;
        margin-bottom:20px;
        line-height:38px;
        padding-left:20px;
    }
    .order-title span{
        display: inline-block;
    }
    .order-title span:nth-child(1){
        width:505px;
    }
    .order-title span:nth-child(2){
        width:120px;
    }
    .order-title span:nth-child(3){
        width:160px;
        text-align: center;
    }
    .order-title span:nth-child(4){
        width:140px;
        text-align: center;
    }
    .order-item{
        border:1px solid #dddddd;
        margin-bottom:20px;
    }
    .order-info{
        height:40px;
        border-bottom:1px solid #dddddd;
        background:#f5f5f5;
        padding-left:20px;
        line-height:40px;
    }
    .order-info li{
        display: inline-block;
        font-size:14px;
        color:#646464;
        line-height:40px;
    }
    .order-info li .icon{
        display:inline-block;
        width:14px;
        height:12px;
        background:url(them/imag/car-company.png);
        vertical-align: middle;
        margin-right:8px;
    }
    .order-info li .number{
        color:#323232;
        vertical-align: middle;
    }
    .order-info li:nth-child(2){
        margin-left:30px;
    }
    .order-info li:nth-child(3){
        margin-left:30px;
    }
    .order-detail{
        background: white;
        font-size:0;
    }
    .order-detail{
        display: flex;
        justify-content: space-between;
    }
    .order-detail .detail-left{
        width:650px;
        border-right:1px solid #dddddd;
    }
    .order-detail .detail-center{
        width:150px;
        height:100%;
    }
    .order-detail .detail-right{
        border-left:1px solid #dddddd;
    }
    .order-detail .detail-right>div{
        height:123px;
        width:150px;
        padding-top:20px;
        border-bottom:1px solid #dddddd;
    }
    .order-detail .detail-right>div:last-child{
        border-bottom:none;
    }
    .detail-left-box{
        display: flex;
        justify-content:flex-start;
        padding:20px;
        border-bottom:1px solid #dddddd;
    }
    .detail-left-box:last-child{
        border:none;
    }
    .detail-left-box .left-box{
        width:505px;
        display: flex;
        justify-content:flex-start;
        align-items: center;
    }
    .detail-left-box .left-box img{
        width:130px;
        height:82px;
    }
    .detail-left-box .left-box>div{
        width:375px;
        height:82px;
        padding-left:20px;
        position: relative;
    }
    .detail-left-box .left-box a{
        font-size:14px;
        color:#000000;
        cursor: pointer;
    }
    .detail-left-box .left-box a:hover{
        color:#30a3ff;
        text-decoration: underline;
    }
    .detail-left-box .left-box p{
        font-size:12px;
        color:#969696;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        left:20px;
    }
    .detail-left-box .right-box{
        color:#ff1010;
        font-size:14px;
    }
    .detail-center{
        font-size:14px;
        text-align: center;
        padding-top:20px;
    }
    .detail-center span{
        display: block;
    }
    .detail-center .black{
        color:#000000;
    }
    .detail-center .grey{
        color:#666666;
    }
    .detail-center i{
        color:#ff1010;
        font-style: normal;
    }
    .detail-right a:first-child{
        border:1px solid #dddddd;
        background: #f5f5f5;
    }
    .detail-right a:nth-child(2):hover{
        color:#30a3ff;
    }
    .detail-right a{
        display: block;
        width:78px;
        height:29px;
        font-size:14px;
        color:#666666;
        margin:0 auto;
        text-align: center;
        line-height:27px;
    }
    .blue:hover{
        border:1px solid #30a3ff;
        color:#30a3ff;
        background:white;
    }
    .yellow:hover{
        border:1px solid #fb8b36;
        color:#fb8b36;
        background:white;
    }
    .f-myvedio-l img{
        width:130px;
        height:83px;
    }
    /*<!-- 对视频表格进行样式设置-->*/
    .back-btn{
        margin: 0 auto;
        display: block;
        /* text-align: center; */
        margin-top: 50px;
        /* vertical-align: middle; */
        height: 20px;
        width: 50px;
        line-height: 20px;
        border: 1px solid #00AAFE;
    }
    .f-vedio-info{
        padding: 20px 20px 20px 0;
        display: flex;
        display: -webkit-flex;

    }
    .f-myvedio-l ,.f-myvedio-r{
        float:left;
    }
    .f-myvedio-l{
        margin-right: 20px;
    }
    .f-myvedio-r-up a {
        display: block;
        margin-bottom:10px;
    }

    .f-myvedio-r-down{
        color:#00AAFE;
        margin-top:20px;
    }


    /******************/
    a:hover {
        text-decoration: none;
        color:#00AAFE
    }
    .right .f-right-title{
        height:50px;
    }
    /* table*/
    .table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
        border:1px solid #ddd;
        font-size:14px;
    }
    .table th,.table td{
        padding-left: 8px;
        padding-right:8px;
        text-align: center;
        vertical-align: top;
        border-top: 1px solid #dddddd;
    }
    .table th{
        font-weight: normal;
        height:35px;
        line-height: 35px;
    }
    .table td{
        height:100px;
        /*line-height: 60px;*/
    }
    .table th:nth-child(1),.table td:nth-child(1){
        text-align: left;
        padding-left:20px;
    }
    .table tbody{
        background:#fff;
    }

    .td-50{
        width: 35%;
        max-width: 180px;
    }
    .td-15{
        width: 15%;
        max-width: 120px;
        overflow-x: hidden;
        text-overflow: ellipsis;
        line-height: 120px;;
    }

    .border-bottom{
        border-bottom: 1px solid #E1DEDA;
    }
    /*评论中 table td 内部样式设定  #666460*/
    .td-comment-filename{
        color: #00AAFE;
    }
    .td-comment-up,.td-comment-down{
        margin-top:20px;
    }
    .td-comment-down{
        padding-bottom:20px;
    }
</style>